<template>
	<u-overlay :show="show" @click="close">
		<view class="warp">
			<view class="langbox">
				<view class="langlist" >
					<view class="langcn" :class="xuzhong==3?'red':''" @click="switchLanguage('tr-CN',3)">
						<!-- <image :src="cn2" mode="widthFix" class="chinese" v-if="xuzhong"></image>
						<image :src="cn" mode="widthFix" class="chinese" v-else></image> -->
						{{$data.$language.chi}}
					</view>
					<view class="langen" :class="xuzhong==2?'red':''" @click="switchLanguage('en-US',2)">
						<!-- <image :src="en2" mode="widthFix" class="chinese" v-if="xuzhong"></image>
						<image :src="en" mode="widthFix" class="chinese" v-else></image> -->
						<!-- {{$data.$language.eng}} -->
						English
					</view>
					<!-- <view class="langen" style="margin-top: 18rpx;" :class="xuzhong==3?'red':''" @click="switchLanguage('tr-CN',3)">
						<image :src="en2" mode="widthFix" class="chinese" v-if="xuzhong"></image>
						<image :src="en" mode="widthFix" class="chinese" v-else></image>
						{{$data.$language.eng}}
						{{$data.$language.Trch}}
					</view> -->
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			
			
		},
		data() {
			return {
				$language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				cn: '../../static/qukuailian3_slices/zhongwen.png',
				en: '../../static/qukuailian3_slices/yingwen.png',
				cn2:'../../static/qukuailian4_slices (1)/zhongwen.png',
				en2:'../../static/qukuailian4_slices (1)/yingwen.png',
				// xuzhong:uni.getStorageSync('locale')=='en-US'?true:false,
				xuzhong:1,
			}
		},
		created() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
		},
		mounted() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.xuzhong = 2
			}else if(translate=='zh-CN'){
				this.xuzhong = 1
			}else{
				this.xuzhong = 3
			}
			console.log(this.xuzhong)
		},
		// onReady() {
		//     this.setTabLang()
		// },
		methods: {
			 switchLanguage(locale,index) {
				 console.log(index)
				 this.xuzhong= index
			      uni.setStorageSync('locale', locale) // 存储当前yuyan到本地存储
			      this.$emit('languageChanged', locale) // 发送yuyan切换事件
				  
			    },
			// switchLang(lang) {
			//     this._i18n.locale = lang;
			//     uni.setStorageSync('lang', lang);
			// 	this.setTabLang()
			// 	if(lang == 'zh-CN'){
			// 		this.xuzhong = false
			// 	}else{
			// 		this.xuzhong = true
			// 	}
			// 	this.$emit('switch',lang)
			// },
			// setTabLang(){
			// 	uni.setNavigationBarTitle({// 修改头部标题
			// 	    title: this.$t('home.title')
			// 	});
			// 	uni.setTabBarItem({// 修改底部导航
			// 	    index: 0,
			// 	    text: this.$t('home.nav')
			// 	});
			// },
			close() {
				this.$emit('close')
			},
		}
	}
</script>

<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.chinese {
		height: 40rpx;
		width: 40rpx;
	}

	.english {
		height: 40rpx;
		width: 40rpx;
	}

	.langbox {
		/* background-color: #00000040;
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		z-index: 1; */
	}

	.langlist {
		position: absolute;
		top: 98rpx;
		right: 58rpx;
		width: 166rpx;
		height: 122rpx;
		background: url('/static/langbox.png');
		background-size: 190rpx 165rpx;
		background-repeat: no-repeat;
		padding: 46rpx 0 0 24rpx;
	}

	.langcn,
	.langen {
		display: flex;
		align-items: center;
	}

	.langcn {
		margin-bottom: 18rpx;
	}
	
	.red{
		color: #0762FF;
	}
</style>